<template>
    <nav>
        <el-row justify="center">
            <el-col :span="20">
                <!-- 不知道放啥的的navbar留空位 -->
                <div class="navbar">
                </div>
            </el-col>
        </el-row>
    </nav>
    <el-main>
        <el-row justify="center">
            <el-col :span="20">
                <div class="title">
                    <el-row :gutter="75">
                        <el-col :span="16">
                            <Swiper></Swiper>
                        </el-col>
                        <el-col :span="8">
                            <div class="right-box">
                                <div class="blog-headNotice">
                                    <img :src="blogHeadNotice.imageURL" :alt="blogHeadNotice.title"
                                        class="blog-headNotice-img">
                                    <div class="title-link">
                                        <h3>{{ blogHeadNotice.title }}</h3>
                                    </div>
                                    <div>
                                        <p class="title-description">{{ blogHeadNotice.desc }}</p>
                                    </div>
                                </div>
                                <div class="blog-tools">
                                    <h3>工具箱</h3>
                                    <div class="blog-tools-items">
                                        <div class="tool-item" v-for="item in blogToolsItems" :key="item.id">
                                            <img :src="item.logoURL" :alt="item.title" class="tool-item-img">
                                            <div>{{ item.title }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </el-main>
    <el-footer height="100%" class="bottom">
        <div class="bottom-box">
            <el-row justify="center">
                <el-col :span="20">
                    <div class="content">
                        <el-row :gutter="75" justify="center">
                            <el-col :span="16">
                                <Tabs></Tabs>
                            </el-col>
                            <el-col :span="8">
                                <el-affix :offset="fixHeight" :index="9999">
                                    <div ref="rightCard">
                                        <el-card class="todoList side-card" shadow="never">
                                            <template #header>
                                                <div class="card-header">
                                                    待办事项
                                                </div>
                                            </template>
                                            <div class="todoList-item" v-for="item in todoListItems" :key="item.id">
                                                <div class="todoList-item-date">
                                                    <p class="todoList-item-date-day">{{ item.day }}</p>
                                                    <p class="todoList-item-date-month">{{ item.month + "月" }}</p>
                                                </div>
                                                <div class="todoList-item-content">
                                                    <el-tag size="small" :type="item.type">{{ item.state }}</el-tag>
                                                    <span class="text-link">{{ item.content }}</span>
                                                </div>
                                                <div>
                                                    <el-checkbox size="large" v-model="item.isChecked"></el-checkbox>
                                                </div>
                                            </div>
                                        </el-card>
                                        <el-card class="related-link side-card" shadow="never">
                                            <template #header>
                                                <div class="card-header">
                                                    相关链接
                                                </div>
                                            </template>
                                            <div v-for="item in relatedLinkItems" :key="item.id" class="related-link-item"
                                                @click="jumpLink(item.link)">
                                                <div class="related-link-item-img-box">
                                                    <img :src="item.logoURL" :alt="item.title"
                                                        class="related-link-item-img">
                                                </div>
                                                <span class="related-link-item-title">{{ item.title }}</span>
                                                <el-icon>
                                                    <ArrowRight />
                                                </el-icon>
                                            </div>
                                        </el-card>
                                        <el-card class="messages side-card" shadow="never">
                                            <template #header>
                                                <div class="card-header">
                                                    近期留言
                                                </div>
                                            </template>
                                            <div v-for="item in messageItems" :key="item.id" class="message-item">
                                                <div class="message-title">
                                                    <img :src="item.avatarURL" :alt="item.name"
                                                        class="message-author-avatar">
                                                    <span class="message-author-name">{{ item.name }}</span>
                                                    <span class="message-publication-time">{{ item.publishTime }}</span>
                                                </div>
                                                <div class="message-content">
                                                    <p>{{ item.content }}</p>
                                                </div>
                                                <el-divider class="message-divider"
                                                    v-if="item.id <= messageItems.length - 1" />
                                            </div>
                                        </el-card>
                                    </div>
                                </el-affix>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-footer>
    <QRCode />
    <FeedBack />
    <el-backtop :right="50" :bottom="120" />
</template>

<script setup>
import Swiper from '@/views/home/components/Swiper.vue';
import Tabs from '@/views/home/components/Tabs.vue'
import QRCode from '@/views/home/components/QRCode.vue';
import FeedBack from '@/views/home/components/FeedBack.vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

const blogHeadNotice = ref({
    title: "C/C++之自定义类型（结构体，位段，联合体，枚举）详解",
    imageURL: new URL('@/assets/images/headImage.png', import.meta.url).href,
    desc: " 随着我们深入学习C语言，我们发现单纯的int，char,double,float类型已经不能满足我们的需要了，那C语言是否还有其他的类型呢，事实上还有一类那就是结构体，结构体是我们自己创造的一种类型，它可以包含C语言的所有类型，结构体是什么呢？结构体如何创建？结构体如何初始化？等问题我会给大家详细解析"
})

const todoListItems = ref([
    {
        month: "9",
        day: "27",
        type: "info",
        state: "已过期",
        content: "打游戏~略略略...",
        isChecked: false,
        id: 1
    },
    {
        month: "10",
        day: "15",
        type: "",
        state: "已完成",
        content: "JavaWeb前端大作业",
        isChecked: true,
        id: 2
    }, {
        month: "10",
        day: "30",
        type: "danger",
        state: "未完成",
        content: "学习学习学习...",
        isChecked: false,
        id: 3
    }, {
        month: "11",
        day: "30",
        type: "danger",
        state: "未完成",
        content: "11月要做的事情...啊吧啊吧啊吧啊吧啊吧啊吧。。。吧啊吧啊吧啊吧啊",
        isChecked: false,
        id: 4
    }, {
        month: "1",
        day: "30",
        type: "danger",
        state: "未完成",
        content: "了解学习更多新技术,等等",
        isChecked: false,
        id: 5
    }
])

const blogToolsItems = ref([
    { logoURL: new URL("@/assets/images/game.png", import.meta.url).href, title: "游戏", href: "#", id: 1 },
    { logoURL: new URL("@/assets/images/label.png", import.meta.url).href, title: "待完善", href: "#", id: 2 },
    { logoURL: new URL("@/assets/images/label.png", import.meta.url).href, title: "待完善", href: "#", id: 3 },
    { logoURL: new URL("@/assets/images/more.png", import.meta.url).href, title: "更多", href: "#", id: 4 },
])

const relatedLinkItems = ref([
    { logoURL: new URL("@/assets/images/github.png", import.meta.url).href, title: "github", link: "https://www.github.com", id: 1 },
    { logoURL: new URL("@/assets/images/gitee.png", import.meta.url).href, title: "gitee", link: "https://gitee.com", id: 2 },
    { logoURL: new URL("@/assets/images/csdn.png", import.meta.url).href, title: "CSDN", link: "https://www.csdn.net", id: 3 },
    { logoURL: new URL("@/assets/images/Vue.png", import.meta.url).href, title: "Vue", link: "https://cn.vuejs.org/", id: 4 },
    { logoURL: new URL("@/assets/images/纸巾.png", import.meta.url).href, title: "本站", link: "#", id: 5 }
]);

const jumpLink = (link) => {
    if (link !== '#')
        window.open(link)
    else
        location.reload()
}

const messageItems = ref([
    { avatarURL: new URL("@/assets/images/wy.png", import.meta.url).href, id: 1, name: "wHitE_", publishTime: "2023-10-09", content: "到此一游~" },
    { avatarURL: new URL("@/assets/images/cachron.jpg", import.meta.url).href, id: 2, name: "cachron", publishTime: "2023-10-03", content: "留言了..." },
    { avatarURL: new URL("@/assets/images/olish.jpg", import.meta.url).href, id: 3, name: "olish_", publishTime: "2023-09-27", content: "不错，真好，厉害" }
])

const rightCard = ref()
const fixHeight = ref()
onMounted(() => {
    if ((rightCard.value.offsetHeight + 20) >= window.innerHeight)
        fixHeight.value = -((rightCard.value.offsetHeight + 20) - window.innerHeight)
    else
        fixHeight.value = 0
    console.log(`(•̀⌓• )シ ( ꒪̇ꌂ̇꒪̇)" 欢迎来到 wHitE 博客 ~
--------------------------------------`)
})
</script>

<style lang="scss" scoped>
.blog-headNotice {
    position: relative;
    line-height: 1.5;
    cursor: pointer;
    transition: .2s;
}

.blog-headNotice-img {
    width: 100%;
    height: 100%;
}

.blog-tools {
    margin-top: 30px;
}

.blog-tools-items {
    display: flex;
    margin-top: 10px;
}

.tool-item {
    color: #303133;
    text-align: center;
    flex: 0 0 25%;
    font-size: 14px;
}

.tool-item-img {
    width: 30px;
    cursor: pointer;
    transition: .2s;
}

.tool-item-img:hover {
    transform: scale(1.1);
    transition: .2s;
}

.card-header {
    font-size: 18px;
}

.title-link {
    color: #000000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.title-link:hover {
    color: #000000;
    text-decoration: underline;
}

.title-description {
    color: #909399;
    overflow: hidden;
    margin-top: 5px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bottom {
    background-color: #FFFFFF;
    padding: 20px;
}

.bottom-box {
    max-width: 1500px;
    margin: 0 auto;
}

.side-card {
    margin-bottom: 20px;
}

.todoList-item {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.todoList-item:nth-child(1) {
    margin-top: 0;
}

.todoList-item-date {
    margin-right: 10px;
}

.todoList-item-date-day {
    color: #ccccd8;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    height: 26px;
    line-height: 26px;
}

.todoList-item-date-month {
    height: 22px;
    line-height: 20px;
    font-size: 14px;
    color: #ccccd8;
    text-align: center;
}

.todoList-item-content {
    flex: 1;
    overflow: hidden;
    line-height: 1.5;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    cursor: pointer;
}

.todoList-item-content .text-link {
    color: #303133;
}

.todoList-item-content .text-link:hover {
    text-decoration: underline;
}

.related-link-item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
}


.related-link-item:nth-child(1) {
    margin-top: 0;
}

.related-link-item-img-box {
    width: 25px;
    height: 25px;

    .related-link-item-img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
        transition: .2s;
    }
}

.related-link-item-img:hover {
    transform: scale(1.1);
    transition: .2s;
}

.related-link-item-title {
    flex: 8;
}

.message-item {
    margin-top: 20px;
}

.message-item:nth-child(1) {
    margin-top: 0;
}

.message-title {
    display: flex;
    align-items: center;
}

.message-author-avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
}

.message-author-name {
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
}

.message-author-name:hover {
    color: #606266;
}

.message-publication-time {
    font-size: 12px;
    color: #606266;
}

.message-content {
    margin-left: 35px;
}

.message-divider {
    margin: 10px 0;
}</style>